<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>iLEADER</title>
    <link rel="stylesheet" href="../dist/lib/layui/css/layui.css">
    <link rel="stylesheet" href="../dist/lib/videoJs/css/video-js.css">
    <link rel="stylesheet" href="../dist/css/main.css">
    <link rel="stylesheet" href="../dist/lib/audio/index.css">
</head>
<body class="bg-shadow">
<!-- header start -->
<div class="course-details-header">
    <div class="s-fl">
        <a class="go-back s-fl" href="e-online-detail-catalog.html"></a>
        <div class="h-title s-thide s-fl">领取2019开工开课红红包领取2019开工开课红红包</div>
        <div class="info-bar s-fl">
            <a href="javascript:;" class="js-store-btn" data-id="1" data-store="0"><i class="icon icon-store"></i>收藏</a>
            <a href="javascript:;" class="js-share-btn"><i class="icon icon-share"></i>分享</a>
        </div>
    </div>
    <ul class="nav-list s-fr">
        <li class="list-item"><a href="#">下载APP</a></li>
        <li class="list-item list-item-after">
            <a href="m-news.html" class="user-news active">消息</a>
            <a href="m-online-course.html">个人中心</a>
        </li>
        <li class="list-item item-user">
            <span class="user-name">黑眼圈圈</span>
            <span class="user-head">
        <img src="../dist/images/user_head.png" alt="">
         <span class="user-exit">
            <a href="#" class="link-exit"><i class="icon-exit"></i>退出</a>
          </span>
      </span>
        </li>
    </ul>
</div>
<!-- header start-->

<!-- content start-->
<div class="study-main">
    <!-- 侧边栏 -->
    <div class="course-sidebar-layout">
        <dl>
            <dd class="js-open-chapter">
                <i class="icon icon-chapter"></i>
                <span>章节</span>
            </dd>
            <dd class="js-open-comment">
                <i class="icon icon-comment"></i>
                <span>评论</span>
            </dd>
        </dl>
    </div>
    <div class="course-sidebar-list">
        <div class="course-catalog-item">
            <div class="chapter-head">
                <span class="s-fl s-thide chapter-title">第1章：</span>
                <span class="s-fl s-thide chapter-name">Taro的基本介绍</span>
            </div>
            <div class="section">
                <a href="#" class="section-link">
                    <span class="s-fl s-icon s-icon-1" title="正文"></span>
                    <span class="s-fl s-thide section-title">第1节：</span>
                    <span class="s-fl s-thide section-name">（正文）Taro多端框架开篇介绍Taro多端框架开篇介绍</span>
                    <span class="s-fl s-thide section-time ">（11:04）</span>
                    <span class="s-fr">已完成</span>
                </a>
            </div>
            <div class="section">
                <a href="#" class="section-link">
                    <span class="s-fl s-icon s-icon-2" title="测试"></span>
                    <span class="s-fl s-thide section-title">第1节：</span>
                    <span class="s-fl s-thide section-name">（测试）Taro多端框架开篇介绍Taro多端框架开篇介绍</span>
                    <span class="s-fl s-thide section-time ">（11:04）</span>
                    <span class="s-fr">已完成</span>
                </a>
            </div>
            <div class="section">
                <a href="javascript:;" class="section-link">
                    <span class="s-fl s-icon s-icon-1" title="正文"></span>
                    <span class="s-fl s-thide section-title">第2节：</span>
                    <span class="s-fl s-thide section-name">（正文）Taro多端框架开篇介绍Taro多端框架开篇介绍</span>
                    <span class="s-fl s-thide section-time ">（11:04）</span>
                    <span class="s-fr color-green">正在学习</span>
                </a>
            </div>
            <div class="section">
                <a href="javascript:;" class="section-link">
                    <span class="s-fl s-icon s-icon-2" title="测试"></span>
                    <span class="s-fl s-thide section-title">第2节：</span>
                    <span class="s-fl s-thide section-name">（测试）Taro多端框架开篇介绍Taro多端框架开篇介绍</span>
                    <span class="s-fl s-thide section-time ">（11:04）</span>
                    <span class="s-fr color-orange">未完成</span>
                </a>
            </div>
            <div class="section isLocked">
                <a href="javascript:;" class="section-link">
                    <span class="s-fl s-icon s-icon-1" title="正文"></span>
                    <span class="s-fl s-thide section-title">第3节：</span>
                    <span class="s-fl s-thide section-name">（正文）Taro多端框架开篇介绍Taro多端框架开篇介绍</span>
                    <span class="s-fl s-thide section-time ">（11:04）</span>
                    <span class="s-fr color-orange"></span>
                </a>
            </div>
            <div class="section isLocked">
                <a href="javascript:;" class="section-link">
                    <span class="s-fl s-icon s-icon-2" title="测试"></span>
                    <span class="s-fl s-thide section-title">第3节：</span>
                    <span class="s-fl s-thide section-name">（测试）Taro多端框架开篇介绍Taro多端框架开篇介绍</span>
                    <span class="s-fl s-thide section-time ">（11:04）</span>
                    <span class="s-fr color-orange"></span>
                </a>
            </div>
        </div>
        <div class="course-catalog-item">
            <div class="chapter-head">
                <span class="s-fl s-thide chapter-title">第2章：</span>
                <span class="s-fl s-thide chapter-name">Taro的基本介绍</span>
            </div>
            <div class="section isLocked">
                <a href="javascript:;" class="section-link">
                    <span class="s-fl s-icon s-icon-1" title="正文"></span>
                    <span class="s-fl s-thide section-title">第1节：</span>
                    <span class="s-fl s-thide section-name">（正文）Taro多端框架开篇介绍Taro多端框架开篇介绍</span>
                    <span class="s-fl s-thide section-time ">（11:04）</span>
                    <span class="s-fr color-orange"></span>
                </a>
            </div>
            <div class="section isLocked">
                <a href="javascript:;" class="section-link">
                    <span class="s-fl s-icon s-icon-2" title="测试"></span>
                    <span class="s-fl s-thide section-title">第1节：</span>
                    <span class="s-fl s-thide section-name">（测试）Taro多端框架开篇介绍Taro多端框架开篇介绍</span>
                    <span class="s-fl s-thide section-time ">（11:04）</span>
                    <span class="s-fr color-orange"></span>
                </a>
            </div>
        </div>
    </div>
    <!-- 视频区域 -->
    <div class="course-video-wrap">
        <div class="layui-carousel audios-pic" lay-filter="audiosPic">
            <div carousel-item></div>
        </div>
        <div class="audios-bar">
<!--            <audio src=""></audio>-->
        </div>
        <!-- 下一节 -->
        <div class="tips-section js-section-next layui-hide">
            <div class="section-container">
                <div class="section-name">下一节课程：<span class="name"></span></div>
                <div class="section-next">
                    <a class="layui-btn layui-btn-normal layui-btn-radius next-course">下一节</a>
                </div>
                <div class="section-op">
                    <a href="javascript:;" class="review-course">重新观看</a>
                </div>
            </div>
        </div>
        <!-- 重载视频 -->
        <div class="tips-section js-section-refresh layui-hide">
            <div class="section-container">
                <div class="section-name">音频加载失败，请刷新重试！</div>
                <div class="section-review">
                    <a href="javascript:;" class="refresh-course">重新加载</a>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- content end-->

<!-- footer start-->
<div class="footer-warp">
    <div class="footer-nav">
        <a href="#">关于我们</a>
        <a href="#">联系我们</a>
        <a href="#">帮助中心</a>
        <a href="javascript:;" class="ewm-link">
            <span>订阅号</span>
            <div class="ewm-box">
                <p>扫描二维码关注<br>iLeader微信服务号</p>
                <img src="../dist/images/ewm.png" alt="">
            </div>
        </a>
    </div>
    <div class="copyright">京ICP证030173号-1   京网文【2013】0934-983号     ©2019Baidu</div>
</div>
<!-- footer end-->
<script src="../dist/lib/jquery.min.js"></script>
<script src="../dist/lib/vue.min.js"></script>
<script src="../dist/lib/layui/layui.js"></script>
<script src="../dist/lib/nicescroll/jquery.nicescroll.min.js"></script>
<script src="../dist/js/popup_all.js"></script>
<script src="../dist/js/c_course.js"></script>
<script src="../dist/lib/audio/audioplayer.js"></script>
<script src="../dist/js/c_audio.js"></script>
</body>
</html>
